<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.App组件的使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo"></div>

    <script type="text/javascript">
      // 第一步：创建Person组件（弟弟）
      let Person = Vue.extend({
        name:'Person', // Person组件不管后期注册时叫什么名，工具里永远呈现的是：Person
        template:`
          <div>
            <h2>人员信息</h2>
            <h4>姓名：{{pname}}</h4>
            <h4>年龄：{{age}}</h4>
            <button @click="showPerson">点我提示个人信息</button>
          </div>
        `,
        data(){
          return {
            pname:'强哥',
            age:18,
          }
        },
        methods:{
          showPerson(){
            alert(`我是${this.pname}，我今年${this.age}岁了`)
          }
        }
      })
      
      // 第一步：创建School组件（弟弟）
      let School = Vue.extend({
        name:'School',// School组件不管后期注册时叫什么名，工具里永远呈现的是：School
        template:`
          <div>
            <h2>学校信息</h2>
            <h4>校名：{{sname}}</h4>
            <h4>地址：{{address}}</h4>
            <button @click="showSchool">点我提示学校信息</button>
          </div>
        `,
        data(){
          return {
            sname:'尚硅谷',
            address:'宏福科技园',
          }
        },
        methods:{
          showSchool(){
            alert(`${this.sname}坐落于${this.address}`)
          }
        }
      })

      // 第一步：创建App组件（弟弟，能管理其他的弟弟）—— 总经理
      let App = Vue.extend({
        name:'App',
        // 第三步：编写组件标签
        template:`
          <div>
            <car/>
            <hr>
            <atguigu-city/>
          </div>
        `,
        // 第二步：注册组件
        components:{car:Person,AtguiguCity:School}
      })

      // 创建vm（大哥）
      new Vue({
        el:'#demo',
        components:{App},
        template:'<App/>'
      })
      
    </script>
  </body>
</html>